<template>
  <!-- v-show="visible" -->
  <div class="dialog-wrap" v-show="visible">
    <div class="dialog" :style="{width:width+'px'}">
      <!-- dialog头部 -->
      <div class="header">
        <span class="title">{{title}}</span>
        <span class="close" @click="close">x</span>
      </div>
      <!-- dialog main -->
      <div class="main">
        <slot></slot>
      </div>
      <!-- dialog footer -->
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 接收外部传入的数据
  props: {
    // 标题
    title: {
      type: String,
      default: "",
      requried: true,
    },
    // 显示或者隐藏
    visible: {
      type: Boolean,
      default: true,
    },
    width: {
      default: 400,
    },
  },
  data() {
    return {};
  },
  methods: {
    close() {
      // 子传父：
      this.$emit("handle-close");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
.dialog-wrap {
  .position-fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: @height;
  height: @height;
  background-color: @backgroundColorDialog;
  .flex-center;
  .dialog {
    width: @dialogW;
    min-height: @dialogH;
    background: @fontColorFFF;
    border-radius: 4px;
    box-shadow: 0 0 5px @fontColorCCC;
    .flex;
    .flex-column;
    .header {
      flex: 0 0 40px;
      border-bottom: 1px solid @fontColorCCC;
      .flex-between;
      padding: 0 @p-x-20;
      .box-sizing;
      .close {
        cursor: pointer;
      }
    }
    .main {
      .flex-1;
      padding: @p-x-20;
      .box-sizing;
    }
    .footer {
      flex: 0 0 40px;
      padding: 0 @p-x-20;
      .flex-end;
      border-top: 1px solid @fontColorCCC;
    }
  }
}
</style>